<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>
import router from '../router'
import { toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { logoutAPI } from "../http/api/user";
import { deleteCookie } from "@/utils/cookieUtil";



const centerDialogVisible = ref(false)

const toLogout = function () {
    centerDialogVisible.vue = true;
    ElMessage({
        message: "退出成功！",
        type: "success",
    });
    deleteCookie('token');
    router.push("/");
};

let rootFlag = false;
</script>

<template>
    <div v-if="rootFlag" class=" root-svg">
        <svg t="1713721317660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4284">
            <path
                d="M876.0576 769.024c5.12 34.816 34.82624 29.696 39.94624 45.056 0 9.71776-5.12 45.056-19.968 49.664-14.84288 0-34.816-5.12-49.664 0-9.71776 5.12-19.95776 9.72288-25.07776 19.96288-9.728 25.08288 9.71776 45.05088 0 54.77888-14.848 9.728-45.06112 25.088-54.784 14.848-14.84288-14.848-14.84288-34.82112-45.056-34.82112-39.94112 0-39.94112 39.94112-59.904 39.94112s-54.784-14.848-54.784-29.70112c5.12-19.96288 14.848-34.81088-5.12-54.77888-25.088-19.968-54.77888 0-65.01888-9.728-14.84288-9.728-19.96288-34.816-14.84288-49.65888s39.936-14.84288 39.936-54.78912c0-29.69088-34.816-34.81088-39.936-54.77376-5.12-14.848 5.12-39.94624 19.96288-45.06624 25.08288-9.71776 39.93088 9.728 65.01888-9.71776 14.848-14.83776 9.728-49.664 9.728-59.904 5.12-14.84288 25.07776-19.96288 39.936-19.96288 29.696 0 19.96288 34.82112 59.904 39.94112 39.936 0 34.816-14.848 54.77888-39.94112 25.08288 0 45.06112 9.72288 49.65888 19.96288 9.728 19.968-9.71776 49.664 19.968 69.63712 25.07776 14.84288 49.664-5.12 65.024 0 9.72288 5.12 14.84288 19.96288 19.96288 39.94112-9.72288 29.16352-54.78912 24.04352-49.66912 69.10976z m-179.70176-99.84c-119.80288 29.696-74.752 204.28288 39.936 184.832 115.2-25.09824 99.84-209.92-39.936-184.832z m-204.288-174.58688c-119.808 0-214.528-94.72-214.528-214.528s94.72-214.528 214.528-214.528c119.80288 0 214.52288 94.72 214.52288 214.528 0.00512 114.688-94.71488 214.528-214.52288 214.528z m174.592 49.65888s-79.88224 0-74.76224 54.784c5.12 59.904-74.752 14.83776-89.59488 65.024-19.968 59.89376 9.72288 49.65376 25.08288 89.6 9.728 25.08288-39.936 39.936-34.816 84.992 9.728 59.904 59.904 29.70624 74.75712 65.024 9.72288 29.696-25.08288 49.664-104.96 49.664-65.01888 0-189.44 0-234.496-5.12 0 0-129.536-5.12-129.536-89.6 0 0-5.12-124.928 74.752-214.528 0 0 84.992-109.56288 229.38112-109.56288l264.192 9.72288z"
                p-id="4285"></path>
        </svg>
        <span class=" w-full justify-center inline-flex text-white">root</span>
    </div>

    <el-dialog v-model="centerDialogVisible" title="退出提示" width="500" center>
        <span>
            退出后，本地信息将全部清除！
        </span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="toLogout">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <ul class=" left-menu w-[5rem] absolute right-0 top-[1rem] z-[99] h-[40%] px-2">
        <li @click="centerDialogVisible = true" class=" logoutBox">
            <span>退出</span>
        </li>
    </ul>

    <div class=" bg-box w-full h-screen flex justify-center items-center relative overflow-hidden">
        <!-- <div class="flex min-w-[3.5rem] w-[5%] absolute top-0 left-0 flex-wrap justify-center mt-[1rem]">
            <div class="w-full z-[99]">
                <img class=" avatar mb-12 m-auto" :src="userInfo.avatar" alt="" srcset="">
            </div>
        </div> -->

        <div class=" md:w-[90%] w-[97%] h-[90%] min-h-[30rem] main-box">
            <div class=" menu">
                <ul>
                    <RouterLink :to="{ name: 'submit' }">
                        <li>插入信息</li>
                    </RouterLink>
                    <RouterLink :to="{ name: 'search' }">
                        <li>查询信息</li>
                    </RouterLink>
                </ul>
            </div>
            <div class="w-full h-[calc(100%-2rem)]">
                <RouterView></RouterView>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
* {
    font-family: "Cormorant Garamond", serif;
}

.link-active-son {
    li {
        background: linear-gradient(to right, #40407a77, #80339677);
        border-radius: 5px;
        color: #eee;
    }
}

.root-svg {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 99;

    svg {
        width: 2.5rem;

        path {
            fill: #eee;
        }
    }
}

.left-menu {
    li {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.avatar {
    $avatar-size: 2.8rem;
    width: $avatar-size;
    height: $avatar-size;
    border: 1px solid #673ab7;

    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.logoutBox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    cursor: pointer;
    background: #99a7b4;
    border-radius: 5px;
    color: #eee;
}

.bg-box {
    background-image: url("../assets/img/homeBg.jpg");
    background-size: cover;
    background-position: center;
}

.main-box {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 7px 29px 0px;
    border-radius: 10px;
    padding: 0 1rem 1rem 1rem;
    backdrop-filter: blur(10px);
}

.menu {
    height: 3rem;
    color: #fff;
    border-bottom: 1px solid #aaa;
    display: flex;
    justify-content: center;
    align-content: center;

    ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        width: 50%;
        min-width: 12rem;

        li {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 6rem;
            padding: 0.5rem;
            cursor: pointer;
        }
    }
}
</style>